/**
 * LED屏幕参数
 * @author xiaoxujs
 */

import { Button, message } from "antd";
import {
    CardHtmlBox,
    LCPTItle,
    ListStyleModuleBox,
    PLCCanshuBox,
} from "../../style";
import { FC, useCallback, useEffect, useState } from "react";
import { ITlplTLaneQueryInLedParam, ITlplTLaneQueryOutLedParam } from "./type";
import { getTlplTLaneQueryInLedParam, getTlplTLaneQueryOutLedParam } from "./api";
import SetLEDModule from "./LEDSetMoudle"; // 设置入口LED参数
import SetLEDChukouModule from "./LEDSetChukouMoudle"; // 设置出口LED参数

const LEDModule: FC<{
    laneId?: string; // 装车站ID
}> = ({
    laneId, // 装车站ID
}) => {
        /**
         * 设置LED参数 - 入口
         */
        const [setLEDShow, setSetLEDShow] = useState(false); // 设置LED参数设置弹窗
        const [ledParameters, setLedParameters] = useState<ITlplTLaneQueryInLedParam>(); //led参数
        // LED屏幕数据
        const ledParametersFun = useCallback(async () => {
            if (laneId) {
                const { code, msg, data } = (await getTlplTLaneQueryInLedParam({
                    laneId: laneId,
                })) as { code: number; msg: string; data: ITlplTLaneQueryInLedParam };
                if (code === 20000) {
                    setLedParameters(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId]);
        useEffect(() => {
            ledParametersFun();
        }, [ledParametersFun]);
        /**
         * 设置LED参数 - 出口
         */
        const [ledParametersChukou, setLedParametersChukou] = useState<ITlplTLaneQueryOutLedParam>(); //led参数
        const [setLEDChukouShow, setSetLEDChukouShow] = useState(false); // 设置LED参数设置弹窗
        // LED屏幕数据
        const ledParametersChukouFun = useCallback(async () => {
            if (laneId) {
                const { code, msg, data } = (await getTlplTLaneQueryOutLedParam({
                    laneId: laneId,
                })) as { code: number; msg: string; data: ITlplTLaneQueryOutLedParam };
                if (code === 20000) {
                    setLedParametersChukou(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId]);
        useEffect(() => {
            ledParametersChukouFun();
        }, [ledParametersChukouFun]);
        // plc参数设置回调
        const handleLEDSetCallback = () => {
            setSetLEDShow(false);
            ledParametersFun();
        };
        // 出口参数设置回调
        const handleLEDSetChukouCallback = () => {
            setSetLEDChukouShow(false);
            ledParametersChukouFun();
        }
        return (
            <>
                <LCPTItle>
                    <div className="lcptitle-left-box">
                        <div className="gun"></div>
                        <div>LED屏幕参数</div>
                    </div>
                </LCPTItle>
                <CardHtmlBox>
                    <div className="box-top">
                        <div className="box-top-title">入口</div>
                        <Button type="link" onClick={() => {
                            setSetLEDShow(true)
                        }}>
                            设置参数
                        </Button>
                    </div>
                    <PLCCanshuBox>
                        <ListStyleModuleBox>
                            <tr className="box-title-tr">
                                <th align="center">名称</th>
                                <th align="center">设备IP地址</th>
                                <th align="center">设备端口号</th>
                            </tr>
                            <tr className="box-tr">
                                <td align="center">
                                    {ledParameters && (ledParameters.ledInName || "--")}
                                </td>
                                <td align="center">
                                    {ledParameters && (ledParameters.ledInIp || "--")}
                                </td>
                                <td align="center">
                                    {ledParameters && (ledParameters.ledInPort || "--")}
                                </td>
                            </tr>
                        </ListStyleModuleBox>
                    </PLCCanshuBox>

                </CardHtmlBox>
                <CardHtmlBox>
                    <div className="box-top">
                        <div className="box-top-title">出口</div>
                        <Button type="link" onClick={() => {
                            setSetLEDChukouShow(true)
                        }}>
                            设置参数
                        </Button>
                    </div>
                    <PLCCanshuBox>
                        <ListStyleModuleBox>
                            <tr className="box-title-tr">
                                <th align="center">名称</th>
                                <th align="center">设备IP地址</th>
                                <th align="center">设备端口号</th>
                            </tr>
                            <tr className="box-tr">
                                <td align="center">
                                    {ledParametersChukou && (ledParametersChukou.ledOutName || "--")}
                                </td>
                                <td align="center">
                                    {ledParametersChukou && (ledParametersChukou.ledOutIp || "--")}
                                </td>
                                <td align="center">
                                    {ledParametersChukou && (ledParametersChukou.ledOutPort || "--")}
                                </td>
                            </tr>
                        </ListStyleModuleBox>
                    </PLCCanshuBox>
                </CardHtmlBox>
                {/* 设置LED参数 */}
                <SetLEDModule
                    open={setLEDShow}
                    handleSetLEDCallback={handleLEDSetCallback}
                    clickData={ledParameters}
                    laneId={laneId}
                />
                <SetLEDChukouModule
                    open={setLEDChukouShow}
                    handleSetLEDCallback={handleLEDSetChukouCallback}
                    clickData={ledParametersChukou}
                    laneId={laneId}
                />
            </>
        );
    };

export default LEDModule;
